<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			.slider {
				width: 520px;
				height: 280px;
				background-color: pink;
				margin: 50px auto;
				position: relative;
			}
			.arrow-l,
			.arrow-r {
				position: absolute;
				width: 24px;
				height: 36px;
				display: block;
				top: 50%;
				margin-top: -18px;
			}
			.arrow-l {
				left: 0;
			}
			.arrow-r {
				right: 0;
			}
			.circle {
				width: 65px;
				height: 13px;
				background-color: rgba(255, 255, 255, 0.2);
				position: absolute;
				bottom: 15px;
				left: 50%;
				margin-left: -32px;
				border-radius: 6px;
			}
			.circle li {
				width: 9px;
				height: 9px;
				background-color: #B7B7B7;
				float: left;
				margin: 2px;
				border-radius: 50%;
				cursor: pointer;
			}
			li.current {
				background-color: #F40;
			}
		</style>
	</head>
	<body>
		<div class="slider">
			<img src="images/taobao.jpg" >
			<a href="#" class="arrow-l">
				<img src="images/left.png">
				</a>
			<a href="#" class="arrow-r">
				<img src="images/right.png">
			</a>
			<ul class="circle">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
